<template>
  <div class="order-card">
    <!-- 订单模板 -->
    <a-modal
      :maskClosable="false"
      v-model="isOrderDetailShow"
      title="入住详情"
      :width="930"
      class="jlw_model_title"
    >
      <template v-if="cardData">
        <order-detail
          :details="cardData"
          orderManage="orderManage"
          @refreshCertifications="refreshCertificationsData"
        ></order-detail>
      </template>
      <template slot="footer">
        <template v-if="cardData.rzbz==='未认证'&&userInfo.jyrlx===3">
          <a-popconfirm
            title="是否确认发送短信？"
            @confirm="handleOperatingOrder('sendMess')"
            okText="确认"
            cancelText="取消"
          >
            <a-button
              type="primary"
              ghost
            >发送短信</a-button>
          </a-popconfirm>
          <a-popconfirm
            title="是否确认同步订单？"
            @confirm="handleOperatingOrder('order')"
            okText="确认"
            cancelText="取消"
          >
            <a-button
              type="primary"
              ghost
            >同步订单</a-button>
          </a-popconfirm>
        </template>
        <template v-if="roomStatus === '已预订'">
          <a-popconfirm
            title="是否确认取消入住？"
            @confirm="handleUpdateStatus(4)"
            okText="确认"
            cancelText="取消"
          >
            <a-button
              type="primary"
              ghost
            >取消入住</a-button>
          </a-popconfirm>
          <a-button
            type="primary"
            ghost
            @click="handleUpdateOrder"
          >修改入住</a-button>
          <a-popconfirm
            title="是否办理入住"
            @confirm="handleUpdateStatus(2)"
          >
            <a-button
              type="primary"
              class="primary_linear"
            >{{ textChanges }}</a-button>
          </a-popconfirm>
        </template>
        <template v-else-if="roomStatus === '已入住'">
          <!-- <a-button type="primary" @click="handleOverStay" ghost>办理续住</a-button> -->
          <a-button
            type="primary"
            ghost
            @click="handleUpdateCheckInOrder"
          >修改入住</a-button>
          <a-popconfirm
            title="是否办理退房？"
            @confirm="handleUpdateStatus(3)"
            okText="确认"
            cancelText="取消"
          >
            <a-button
              type="primary"
              class="primary_linear"
            >办理退房</a-button>
          </a-popconfirm>
        </template>
        <template v-else>
          <a-button
            type="primary"
            @click="cancelOrderDetail"
            class="primary_linear"
          >确定</a-button>
        </template>
      </template>
    </a-modal>

    <!--action修改入住 -->
    <a-modal
      :maskClosable="false"
      v-model="isModifyShow"
      title="修改入住"
      :width="930"
      class="jlw_model_title"
      destroyOnClose
    >
      <template v-if="cardData">
        <edit-order
          :order="cardData"
          ref="newOrder"
        ></edit-order>
      </template>
      <template slot="footer">
        <a-button
          type="primary"
          @click="submitUpdateOrder"
          class="primary_linear"
          :loading="updateLoading"
        >修改入住</a-button>
      </template>
    </a-modal>
    <!-- action续住弹窗 -->
    <!-- <a-modal
      :maskClosable="false"
      v-model="isOverStayShow"
      title="办理续住"
      :width="930"
      class="jlw_model_title"
      destroyOnClose>
      <template v-if="cardData">
        <order-detail :details="cardData" :overStayStatus="isOverStayShow" ref="overStayOrder" @modeNode="cancelOverStay" orderManage="orderManage"></order-detail>
      </template>
      <template slot="footer">
        <a-button type="primary" ghost @click="cancelOverStay">取消</a-button>
      </template>
      <template slot="footer">
        <a-popconfirm title="是否办理续住？" @confirm="submitOverStay" okText="确认" cancelText="取消">
          <a-button type="primary" class="primary_linear">办理续住</a-button>
        </a-popconfirm>
      </template>
    </a-modal> -->
    <a-modal
      :maskClosable="false"
      v-model="isModifyCheckInShow"
      title="修改入住"
      :width="930"
      class="jlw_model_title"
      destroyOnClose
    >
      <order-check-in-detail
        :details="cardData"
        ref="checkIn"
        orderManage="orderManage"
      ></order-check-in-detail>
      <template slot="footer">
        <a-button
          type="primary"
          class="primary_linear"
          @click="submitUpdateCheckInOrder"
          :loading="updateCheckInLoading"
        >修改入住</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import { iconEmty, iconAdd, iconDestine, iconPerson } from '@/core/icons'
import OrderDetail from '@/views/house/status/module/OrderDetail'
// import OrderDetail from './OrderDetail'
import EditOrder from './EditOrder'
import OrderCheckInDetail from '@/views/house/status/module/OrderCheckInDetail'
import { updateStatus, syncAuthOrder, sendAuthMessage } from '@/api/order'
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
  name: 'OrderModel',
  components: {
    OrderDetail,
    EditOrder,
    OrderCheckInDetail // 入住中修改修改入住详情model
  },
  data () {
    return {
      orderData: '',
      isRedBgShow: false,
      iconEmty,
      iconAdd,
      iconDestine,
      iconPerson,
      isModifyShow: false, // 修改入住
      // isOverStayShow: false, // 办理续住
      isOrderDetailShow: false, // 入住详情展示
      updateLoading: false, // 更新加载状态 防止重复点击
      isModifyCheckInShow: false, // 修改入住订单
      updateCheckInLoading: false // 修改入住订单loading状态
    }
  },
  computed: {
    ...mapGetters([
      'orderListMenu',
      'userInfo',
      'STORE_ID',
      'OPERATOR_TYPE'
    ]),
    cardData () {
      return this.orderData
    },
    roomStatus () {
      const roomData = this.orderData
      if (roomData && roomData.ddzt && roomData.ddzt === '1') {
        return `已预订`
      } else if (roomData && roomData.ddzt && roomData.ddzt === '2') {
        return `已入住`
      } else if (roomData && roomData.ddzt && roomData.ddzt === '3') {
        return `已退房`
      } else {
        return `已取消`
      }
    },
    fh () {
      return this.orderData.fh
    },
    houseId () {
      return this.orderData.houseId
    },
    orderId () {
      return this.orderData.orderId
    },
    textChanges () {
      const orderRzsj = moment(this.cardData.rzsj).format('YYYY-MM-DD HH:mm:ss')
      const today = moment().format('YYYY-MM-DD HH:mm:ss')
      if (today === orderRzsj) {
        return '办理入住'
      } else {
        if (moment(this.cardData.rzsj) <= moment()) {
          return '办理入住'
        } else {
          return '提前入住'
        }
      }
    }
  },
  methods: {
    /**
     * 切换房屋状态
     */
    handleRoomStatus (roomStatus) {
      let statusClass = null
      switch (roomStatus) {
        case '已入住':
          statusClass = this.iconPerson
          this.isRedBgShow = true
          break
        case '已预订':
          statusClass = this.iconDestine
          this.isRedBgShow = true
          break
        case '已退房':
          statusClass = this.iconDestine
          this.isRedBgShow = true
          break
        case '已取消':
          statusClass = this.iconDestine
          this.isRedBgShow = true
          break
        default:
          statusClass = this.iconEmty
          this.isRedBgShow = false
          break
      }
      return statusClass
    },
    /** 状态判断弹出模态框
     * 2 入住
     * 3 退房
     * 4 取消 */
    handleUpdateStatus (status) {
      const data = {
        hoperatorId: this.userInfo.id,
        storesId: this.STORE_ID,
        jylx: this.OPERATOR_TYPE,
        ddzt: status,
        houseId: this.houseId,
        orderId: this.orderId
      }
      let desMsg = ''
      switch (status) {
        case 4:
          desMsg = this.$t('message.cancelOrder')
          break
        case 2:
          desMsg = this.$t('message.hanldCheckIn')
          break
        case 3:
          desMsg = this.$t('message.checkOutOrder')
          break
      }
      updateStatus(data).then(res => {
        this.$notification['success']({
          message: this.$t('message.successTitle'),
          description: desMsg
        })
        const params = this.$parent.filterParams(this.orderListMenu)
        this.$parent.searchAjax(params)
        this.isOrderDetailShow = false
      }).catch(() => {
        // 办理续租失败也得更新数据（后台会自动取消无用订单）
        if (status === 2) {
          const params = this.$parent.filterParams(this.orderListMenu)
          this.$parent.searchAjax(params)
          this.isOrderDetailShow = false
        }
      })
    },
    /* 修改预订订单弹窗 */
    handleUpdateOrder () {
      this.isModifyShow = true
      this.isOrderDetailShow = false// 后期修改（防止谈两个窗口）
    },
    /** 打开修改入住订单窗口 */
    handleUpdateCheckInOrder () {
      this.isModifyCheckInShow = true
      this.isOrderDetailShow = false
    },
    /**
     * 修改入住订单action
     */
    async submitUpdateCheckInOrder () {
      this.updateCheckInLoading = true
      const data = {
        hoperatorId: this.userInfo.id,
        storesId: this.STORE_ID,
        jylx: this.OPERATOR_TYPE,
        orderId: this.orderId
      }
      try {
        const res = await this.$refs.checkIn.handleSubmit(data)
        if (res.code === 200) {
          this.$notification['success']({
            message: this.$t('message.successTitle'),
            description: this.$t('message.updateOrder')
          })
          this.updateCheckInLoading = false
          this.isModifyCheckInShow = false
          const params = this.$parent.filterParams(this.orderListMenu)
          this.$parent.searchAjax(params)
        }
      } catch {
        this.updateCheckInLoading = false
        console.log('验证不通过')
      }
    },
    async submitUpdateOrder () {
      this.updateLoading = true
      try {
        const res = await this.$refs.newOrder.handleSubmit('MODIFIER_ORDER')
        if (res.code === 200) {
          this.$notification['success']({
            message: this.$t('message.successTitle'),
            description: this.$t('message.updateOrder')
          })
          this.updateLoading = false
          this.isModifyShow = false
          const params = this.$parent.filterParams(this.orderListMenu)
          this.$parent.searchAjax(params)
        }
      } catch {
        this.updateLoading = false
        console.log('验证不通过')
      }
    },
    /** 取消修改入住的模态框 */
    handleOverStay () {
      this.isOverStayShow = true
      this.isOrderDetailShow = false// 后期修改
    },
    /**
     * 办理续住
     * @param jssj 结束时间
     */
    // async submitOverStay () {
    //   const data = {
    //     hoperatorId: this.userInfo.id,
    //     storesId: this.STORE_ID,
    //     jylx: this.OPERATOR_TYPE,
    //     orderId: this.orderId
    //   }
    //   try {
    //     const res = await this.$refs.overStayOrder.handleSubmit(data)
    //     if (res.code === 200) {
    //       this.$notification['success']({
    //         message: this.$t('message.successTitle'),
    //         description: this.$t('message.stayOver')
    //       })
    //       this.isOverStayShow = false
    //       const params = this.$parent.filterParams(this.orderListMenu)
    //       this.$parent.searchAjax(params)
    //     }
    //   } catch {
    //     console.log('验证不通过')
    //   }
    // },
    /* 取消续住订单的模态框 */
    // cancelOverStay () {
    //   this.isOverStayShow = false
    // },
    /* 取消/取消、退房入住详情的模态框 */
    cancelOrderDetail () {
      this.isOrderDetailShow = false
    },
    /**
     * 订单模板显示控制器 */
    handleOrderDetails (recode) {
      this.orderData = recode
      this.isOrderDetailShow = true
    },
    /**
     * 认证更新
     * type 1 关闭详情弹窗
     * type 2 更新数据
     */
    refreshCertificationsData (type = 1) {
      switch (type) {
        case 1:
          this.isOrderDetailShow = false
          break
        case 2:
          const params = this.$parent.filterParams(this.orderListMenu)
          this.$parent.searchAjax(params)
          break
      }
    },
    // 发送短信，同步订单
    handleOperatingOrder (type) {
      if (type === 'order') {
        syncAuthOrder(this.cardData.orderId).then((res) => {
          if (res.code === 200) {
            this.$notification['success']({
              message: this.$t('message.successTitle'),
              description: res.message
            })
          }
        })
      } else if (type === 'sendMess') {
        sendAuthMessage(this.cardData.orderId).then((res) => {
          if (res.code === 200) {
            this.$notification['success']({
              message: this.$t('message.successTitle'),
              description: res.message
            })
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
